<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
    <head>
        <th:block th:include="include :: header('?????')" />
        <th:block th:include="include :: ztree-css" />
    </head>
    <style>
	body{height:auto;font-family: "Microsoft YaHei";}
	button{font-family: "SimSun","Helvetica Neue",Helvetica,Arial;}
</style>
    <body class="hold-transition box box-main">
        <input id="treeId"   name="treeId"    type="hidden" th:value="${menu.id}"/>
        <input id="treeName" name="treeName"  type="hidden" th:value="${menu.menuName}"/>
        <div class="wrapper"><div class="treeShowHideButton" onclick="$.tree.toggleSearch();">
            <label id="btnShow" title="????" style="display:none;">?</label>
            <label id="btnHide" title="????">?</label>
        </div>
            <div class="treeSearchInput" id="search">
                <label for="keyword">????</label><input type="text" class="empty" id="keyword" maxlength="50">
                <button class="btn" id="btn" onclick="$.tree.searchNode()"> ?? </button>
            </div>
            <div class="treeExpandCollapse">
                <a href="#" onclick="$.tree.expand()">??</a> /
                <a href="#" onclick="$.tree.collapse()">??</a>
            </div>
            <div id="tree" class="ztree treeselect"></div>
        </div>
        <th:block th:include="include :: footer" />
        <th:block th:include="include :: ztree-js" />
        <script th:inline="javascript">
		$(function() {
			var url = ctx + "system/menu/menuRadioTree";
			var options = {
		        url: url,
		        expandLevel: 1,
		        onClick : zOnClick
		    };
			$.tree.init(options);
		});

		function zOnClick(event, treeId, treeNode) {
		    var treeId = treeNode.id;
		    var treeName = treeNode.name;
		    $("#treeId").val(treeId);
		    $("#treeName").val(treeName);
		}
	</script>
    </body>
</html>